import React, { useEffect } from 'react'
import { Button, Card, Form, Input, message } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';

import style from "../index.module.css"

import { addHospitalRequest, getHosSetFromIdRequest, updateHosSetFromIdRequest } from "@/api/hospital/hospitalSet"

import type { addHospitalParamType } from "@/api/hospital/model/hospitalSetTypes"

export default function AddOrUpdateHosSet() {

	// 使用编程式路由导航
	const navigate = useNavigate()

	//通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
	// 通过Form组件上的useForm方法可以创建一个实例（useForm方法得到一个数组，对数组解构赋值得到form实例对象。），然后在某一个Form（表单）组件上添加一个form属性，值为解构得到的form实例，那么Form（表单）和当前的form实例就关联起来了。
	const [form] = Form.useForm()

	const { id } = useParams();  //一进入更新医院信息页面就要用id发请求过去，获取该id对应的医院信息，所以在AddOrUpdateHosSet组件中，解构params参数.得到id

	// 一进到页面就发送请求获取对应id的医院数据渲染页面。
	// 由于组件是复用组件，从添加按钮和更新按钮都可以进入同一个组件，所以要判断我们是否从updatehosset路径进去的。而updatehosset路径会带着id，所以只要有id就是从更新按钮进入的。
	useEffect(() => {
		//因为组件复用，在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id
		if (id) {
			const getHosDetail = async () => {
				const result = await getHosSetFromIdRequest(id)    //发送请求  需要传一个id，发完请求后立即用获得的数据渲染页面。

				//Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里（可以把对象渲染到表单）
				form.setFieldsValue(result)
			}
			getHosDetail();
		}
	})


	//1.新增医院的事件回调函数
	const addHosFinishHandle = async (fieldValue: addHospitalParamType) => {
		//判断当前组件中是否存在id 如果有则代表修改,没有则代表新增
		if (id) {
			await updateHosSetFromIdRequest({ ...fieldValue, id })    //fieldValue获取的是表单中输入的数据。
			//修改成功以后返回医院设置页面
			navigate("/syt/hospital/hospitalSet")

			message.success("修改数据成功")
		} else {
			//发送新增请求
			await addHospitalRequest(fieldValue)   //把收集到的表单数据fieldValue传过去。
			// 新增成功后返回医院设置页面，使用编程式路由导航。
			navigate("/syt/hospital/hospitalSet")

			message.success("新增数据成功")
		}

	}

	// 2.点击返回事件回调函数
	const goBackHandle = () => {
		navigate(-1)
	}

	return (
		<Card>
			<Form
				form={form}     //以后操作form就是在操作当前的表单
				name="basic"
				labelCol={{ span: 3, }}
				wrapperCol={{ span: 18, }}
				onFinish={addHosFinishHandle}
			>
				<Form.Item
					label="医院名称"
					name="hosname"
					rules={[{
						required: true,
						message: '请输入医院名称',
						transform(value){
							return value.trim();
						}
					}]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label="医院编号"
					name="hoscode"
					rules={[{
						required: true,
						message: '请输入医院编号',
						transform(value){
							return value.trim();
						}
					}]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					label="api基础路径"
					name="apiUrl"
					rules={[{
						required: true,
						message: '请输入api基础路径',
						transform(value){
							return value.trim();
						}
					}]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					label="联系人姓名"
					name="contactsName"
					rules={[{
						required: true,
						message: '请输入联系人姓名',
						transform(value){
							return value.trim();
						}
					}]}
				>
					<Input />
				</Form.Item>
				<Form.Item
					label="联系人手机"
					name="contactsPhone"
					rules={[{
						required: true,
						message: '请输入联系人手机',
						transform(value){
							return value.trim();
						}
					}]}
				>
					<Input />
				</Form.Item>

				<Form.Item
					wrapperCol={{ offset: 3 }}
				>
					<Button type="primary" htmlType="submit" className={style.mr}>
						提交
					</Button>
					<Button type="default" htmlType="button" onClick={goBackHandle}>
						返回
					</Button>
				</Form.Item>
			</Form>
		</Card>
	);
}





